<script setup>
import { getCurrentInstance, onMounted, ref } from "vue";
import { useUserStore } from "@/stores/user.js";
import { useCartStore } from "@/stores/cart";

const internalInstance = getCurrentInstance();
const store = useUserStore()
// 获取购物车位置
const cart = ref(undefined)
onMounted(() => {
    internalInstance.appContext.config.globalProperties.$cartPosition =  cart.value
})
function logout() {
    store.clearInfo()
}

</script>

<template>
    <header>
        <div class="wrap">
            <!-- 用户已登录 -->
            <ul v-if="store.userInfo">
                <li>
                    <router-link to="/home">首页</router-link>
                </li>
                <span>|</span>
                <li>
                    <router-link to="/offical">进入官网</router-link>
                </li>
                <span>|</span>
                <li>
                    <router-link to="#">云服务</router-link>
                </li>
                <span>|</span>
                <li>
                    <a href="/public/policy.html">协议规则</a>
                </li>
                <span>|</span>
                <li>
                    <router-link to="#">资质证照</router-link>
                </li>
                <span>|</span>
                <li>
                    <router-link to="#">反馈建议</router-link>
                </li>
                <li class="cart" ref="cart" >
                    <router-link to="/cart">
                        购物车({{ useCartStore().cartList.length }})
                    </router-link>
                </li>
                <li class="my">
                    <router-link to="/my">个人中心</router-link>
                </li>
                <li style="float: right; margin-right: 5px;">
                    <a href="#" @click="logout">退出登录</a>
                </li>
                <li style="float: right; margin-right: 5px;">
                    <router-link to="/server" class="server">客服</router-link>
                </li>
            </ul>
            <!-- 用户未登录 -->
            <ul v-else>
                <li>
                    <router-link to="/login">亲！请登录</router-link>
                </li>
                <span>|</span>
                <li>
                    <router-link to="/regist">免费注册</router-link>
                </li>
                <span>|</span>
                <li>
                    <router-link to="/offical">访问管网</router-link>
                </li>
                <li class="cart" >
                    购物车(0)
                </li>
            </ul>
        </div>

    </header>

</template>

<style scoped lang="less">
.server::before{
    content: '\ec2e';
    font-family: "iconfont" !important;
    
}
header {
    width: 100%;
    font-size: 12px;
    height: 40px;
    background-color: #333333;
    color: #b0b0b0;

    .wrap {
        width: 1226px;
        height: 100%;
        margin: 0 auto;

        ul {
            width: 100%;
            height: 100%;

            li {
                float: left;
                line-height: 40px;

                a {
                    color: #b0b0b0;
                }

                &:hover a {
                    color: #5ebced;
                }
            }

            .my {
                float: right;
            }

            .cart {
                margin-left: 5px;
                font-size: 13px;
                float: right;
                text-align: center;
                width: 100px;
                height: 100%;
                cursor: pointer;
                transition: all .2s;
                background-color: #424242;
                a{
                    color: inherit;
                }
                &::before {
                    font-size: 16px;
                    content: '\e609';
                    font-family: "iconfont" !important;
                }

                &:hover {
                    background-color: #fff !important;
                    color: #5ebced !important;
                }
            }

            span {
                color: #424242;
                line-height: 29px;
                float: left;
                margin: 5px;
            }
        }
    }


}
</style>
